<div class="outer-container" *ngIf="!isLoading">
  <div class="artist-header">
    <div class="artist-name">{{artistData.attributes.name}}</div>
    <span *ngIf="albumsCount" class="albums-count">{{ albumsCount | i18nPlural: {'=1': '# album', 'other': '# albums'} }}</span>
    <span *ngIf="albumsCount && singlesCount" class="albums-count"> • </span>
    <span *ngIf="singlesCount" class="albums-count">{{ singlesCount | i18nPlural: {'=1': '# single', 'other': '# singles'} }}</span>
    <span *ngIf="(singlesCount || albumsCount) && playlistsCount" class="albums-count"> • </span>
    <span *ngIf="playlistsCount" class="albums-count">{{ playlistsCount | i18nPlural: {'=1': '# playlist', 'other': '# playlists'} }}</span>
  </div>

  <div *ngIf="albumsCount">
    <div class="albums-title">Albums</div>
    <div class="albums-grid">
      <ng-container *ngFor="let albumData of artistData.relationships.albums.data">
        <app-album-preview
          *ngIf="!albumData.attributes.isSingle"
          [albumData]="albumData"
        >
        </app-album-preview>
      </ng-container>
    </div>
  </div>

  <div *ngIf="singlesCount">
    <div class="albums-title">Singles</div>
    <div class="albums-grid">
      <ng-container *ngFor="let albumData of artistData.relationships.albums.data">
          <app-album-preview
          *ngIf="albumData.attributes.isSingle"
          [albumData]="albumData"
        >
        </app-album-preview>
      </ng-container>
    </div>
  </div>

  <div *ngIf="playlistsCount">
    <div class="albums-title">Playlists</div>
    <div class="albums-grid">
      <ng-container *ngFor="let playlistData of artistData.relationships.playlists.data">
          <app-playlist-preview
          [playlistData]="playlistData"
        >
        </app-playlist-preview>
      </ng-container>
    </div>
  </div>
</div>

<mat-spinner class="spinner" *ngIf="isLoading"></mat-spinner>